<template>
  <div>
    <div id="pie3"></div>
  </div>
</template>

  <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("pie3"));


      const chartData = [
        {
            value: 12,
            name: '主题1'
        },
        {
            value: 121,
            name: '主题12'
        },
        {
            value: 20,
            name: '好评'
        },
        {
            value: 41,
            name: '规上企业'
        },
        {
            value: 328,
            name: '粉尘涉爆企业'
        },
        {
            value: 142,
            name: '易制毒企业3'
        },
        {
            value: 328,
            name: '粉尘涉爆企业2'
        },
        {
            value: 142,
            name: '易制毒企业2'
        },
        {
            value: 95,
            name: '锂电池企业'
        }
    ]
    const colorList = ['#115FEA', '#10EBE3', '#10A9EB', '#EB9C10', '#2E10EB', '#9B10EB']
    const sum = chartData.reduce((per, cur) => per + cur.value, 0)
    const gap = (1 * sum) / 100
    const pieData1 = []
    const pieData2 = []
    const gapData = {
        name: '',
        value: gap,
        itemStyle: {
            color: 'transparent'
        }
    }
    for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
            ...chartData[i],
            itemStyle: {
                borderRadius: 10
            }
        })
        pieData1.push(gapData)

        // 第二圈数据
        pieData2.push({
            ...chartData[i],
            itemStyle: {
                color: colorList[i],
                opacity: 0.21
            }
        })
        pieData2.push(gapData)
    }

      this.chart.setOption({
        tooltip: {
            show: true,
            backgroundColor: 'rgba(0, 0, 0,.8)',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            show: true,
            right: '2%',
            top: 'center',
            align: 'left',
            itemGap: 18,
            // icon: 'rect',
            itemWidth: 13,
            itemHeight: 7,
            // symbolKeepAspect: false,
            textStyle: {
                color: '#D8DDE3',
                rich: {
                    name: {
                        verticalAlign: 'right',
                        align: 'left',
                        width: 80,
                        fontSize: 10,
                        color: '#D8DDE3'
                    },
                    percent: {
                        padding: [0, 0, 0, 8],
                        color: '#D8DDE3'
                    }
                },
                borderWidth: 53 // 间距的宽度
            },
            formatter: name => {
                // console.log(name)
                // console.log(chartData)
                const item = chartData.find(i => {
                    return i.name === name
                })
                const p = ((item.value / sum) * 100).toFixed(0)
                return '{name|' + name + '}' + '{percent|' + p + '}' + '个'
            }
        },
        grid: {
            top: 35,
            right: 30,
            bottom: 20,
            left: 30
        },
        color: colorList,
        series: [
            {
                name: '',
                type: 'pie',
                roundCap: true,
                radius: ['66%', '70%'],
                center: ['36%', '45%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: pieData1
            },
            {
                type: 'pie',
                radius: ['66%', '54%'],
                center: ['36%', '45%'],
                gap: 1.71,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                silent: true,
                data: pieData2
            },
            {
                type: 'pie',
                center: ['36%', '45%'],
                radius: [0, '45.6%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: 'rgba(75, 126, 203,.1)'
                },
                silent: true,
                data: [
                    {
                        value: 100,
                        name: ''
                    }
                ]
            }
        ]
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

  <style lang="scss" scoped>
#pie3 {
  width: 100%;
  height: 40vh;
}
</style>